<template>
  <div>
    <a-badge :dot="!!value">
      <a-button icon="code" type="link" @click="open">{{ $t('m.common.button.config') }}</a-button>
    </a-badge>

    <ych-modal
      :fullscreen="false"
      :title="title"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      :cancelText="$t('m.common.button.close')">
      <a-row>
        <a-col :span="24">
          <a-form-item :label="$t('m.eform.appview.entity.header')" :labelCol="colLayout3.fixed.labelCol" :wrapperCol="colLayout3.fixed.wrapperCol">
            <a-tooltip :title="$t('m.eform.formDesign.label.zu-jian-lu-jing-tooltip')">
              <a-input v-model="header"/>
            </a-tooltip>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="$t('m.eform.appview.entity.footer')" :labelCol="colLayout3.fixed.labelCol" :wrapperCol="colLayout3.fixed.wrapperCol">
            <a-tooltip :title="$t('m.eform.formDesign.label.zu-jian-lu-jing-tooltip')">
              <a-input v-model="footer"/>
            </a-tooltip>
          </a-form-item>
        </a-col>
      </a-row>
    </ych-modal>
  </div>
</template>

<script>

import {GardLayoutMixin} from '@/mixins/GardLayoutMixin'

export default {
  name: 'CustomSlotDialog',
  mixins: [GardLayoutMixin],
  props: {
    value: String
  },
  data() {
    return {
      title: this.$t('m.eform.appview.entity.customSlot'),
      visible: false,
      header: null,
      footer: null,
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    handleOk() {
      const customSlot = {}
      if (this.header) {
        customSlot['header'] = this.header
      }
      if (this.footer) {
        customSlot['footer'] = this.footer
      }
      let result = ''
      if (Object.keys(customSlot).length > 0) {
        result = JSON.stringify(customSlot)
      }
      this.$emit("input", result);
      this.$emit("change", result);
      this.visible = false
    },
    handleCancel() {
      this.visible = false
    },
  },
  watch: {
    value: {
      handler(value) {
        const customSlot = value ? JSON.parse(value) : {}
        this.header = customSlot.header || null
        this.footer = customSlot.footer || null
      },
      immediate: true
    }
  }
}
</script>
